<template>
	<div id="app">
		<div class="userInfo">
			<img :src="$store.state.userInfo.coverUrl" alt="">
			<p>{{$store.state.userInfo.authorName}}</p>

		</div>
		<div class="userControl" v-if="userInfo.identity==0?false:true">
			<!-- 作品管理页面跳转 -->
			<router-link to="/author/bookManage">
				<div class="item">
					<img src="../../../assets/home/WorkManagement.png" alt="">
					<!-- <i class="el-icon-question"></i> -->
					<p>{{$t("home.workManagement")}}</p>
				</div>
			</router-link>
			<!-- 立即写作页面跳转 -->
			<router-link to="/author/bookManage/createBook">
				<div class="item">
					<img src="../../../assets/home/writing.png" alt="">
					<!-- <i class="el-icon-edit""></i> -->
					<p>{{$t("home.writeNow")}}</p>

				</div>
				
			</router-link>
			<!-- 作者中心页面跳转 -->
			<!-- <router-link to="/author/center">
				<div class="item">
					<img src="../../../assets/home/chuangzuozhezhongxin.png" alt=""> -->
					<!-- <i class="el-icon-question"></i> -->
					<!-- <p>{{$t("home.authorCenter")}}</p>

				</div>
			</router-link> -->
		</div>
		<router-link to="/improveInfor">
		<div class="Notloggedin" v-if="userInfo.identity==0?true:false" >
				<div class="coin">
					<img src="../../../assets/xiaoyumao.png" alt="">
				</div>
				<div class="women">Becoming to writer</div>
		</div>
		</router-link>
	</div>
</template>

<script>
export default{
	computed: {
    bTrue: function () {
      return this.$store.getters.userInfo.token;
    },
    userInfo() {
      return this.$store.getters.userInfo;
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
	.userInfo {
		width: 100%;
		padding: 20px 0;
		display: flex;
		flex-direction: column;
		justify-content: center;

		img {
			width: 94px;
			height: 94px;
			margin: 10px auto;
			border-radius: 50%;
		}

		p {
			font-size: 20px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 25px;
			text-align: center;
		}
	}

	.userControl {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		padding: 30px 0;
		.item {
			flex: 1;
			display: flex;
			flex-direction: column;
			text-align: center;
			flex-wrap:wrap;
			img{
				width: 27px;
				height: 32px;
				margin: 10px auto;
			}
			i {
				font-size: 40px;
				margin: 10px 0;
			}

			p {
				width: 95px;
				height: auto;
				font-size: 16px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000;
				line-height: 25px;
			}
		}
	}
	.Notloggedin{
		width: 312px;
		height: 42px;
		position: relative;
		background: linear-gradient(to right, #ee685a, #e25177);
		position: absolute;
		top: 510px;
		left: 55px;
		border-radius: 8px;
		cursor: pointer;
		line-height: 42px;
		color: #FFFFFF;
		font-size: 16px;
		.coin{
			position: absolute;
			top: 9px;
			left: 50px;
		}
		.women{
			text-align: center;
		}
	}
</style>
zuozhezhongxin